<template>
  <!-- grid card -->
  <div class="grid">
    <div class="grid-item" :style="{ height: height + 'px' }" v-for="(item, index) in dataset" :key="index">
      <img v-if="item.icon" style="width: 30px; height: 30px; margin-right: 10px" :src="item.icon" alt="" />
      <div class="item-right">
        <div class="grid-item-value colorYellow">
          {{ item.value }}
          <span v-if="isCounty">{{ unitCounty[item.name] }}</span>
          <span v-else>{{ unit[item.name] }}</span>
        </div>
        <div class="grid-item-name colorWhite">{{ item.name }}</div>
      </div>
    </div>
  </div>
</template>

<script>
const unit = {
  农技人员: "人",
  服务组织: "个",
  农机总动力: "万千瓦",
  农资经营店: "家",
  种粮农户: "万户",
  规模种粮大户: "户",
  规模种植面积: "万亩",
  规模化率: "%",
  粮食生产功能区: "万亩",
  粮功区播种面积: "万亩",
  优质稻面积: "万亩",
  优质稻占比: "%",
  高产创建: "万亩",
  测土配方: "万亩",
  绿色防控: "万亩",
  种养结合: "万亩",
  规模种粮: "亿元",
  耕地地力: "亿元",
};
const unitCounty = {
  农技人员: "人",
  服务组织: "个",
  农机总动力: "万千瓦",
  农资经营店: "家",
  种粮农户: "万户",
  规模种粮大户: "户",
  规模种植面积: "亩",
  规模化率: "%",
  粮食生产功能区: "亩",
  粮功区播种面积: "亩",
  优质稻面积: "亩",
  优质稻占比: "%",
  高产创建: "亩",
  测土配方: "亩",
  绿色防控: "亩",
  种养结合: "亩",
  规模种粮: "亿元",
  耕地地力: "亿元",
};
export default {
  data() {
    return {
      unit,
      unitCounty,
    };
  },
  computed: {
    isCounty() {
      return JSON.parse(this.$store.getters.areaIds).length === 3 ? true : false;
    },
  },
  props: {
    dataset: {
      type: Array,
      default: () => [],
    },
    height: {
      type: String,
      default: "78",
    },
  },
};
</script>

<style lang="less" scoped>
.grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  // padding: 35px 0;
  margin-top: 10px;
  .grid-item {
    display: flex;
    // justify-content: space-between;
    justify-content: center;
    align-items: center;
    padding: 20px;
    margin: 10px;
    width: 175px;
    height: 78px;
    background: linear-gradient(to bottom, #082043, #144373);
    border: 1px solid;
    border-image: linear-gradient(#1b355a, #4f7db9) 30 30;
    border-top: 0;
    .item-right {
      text-align: left;
      .grid-item-name {
        // width: 110px;
        margin-top: 10px;
      }
      .grid-item-value {
        width: 110px;
      }
    }
  }
}
</style>
